<template>
  <div class="layout">
      <h1>Comment</h1>
        <Row type="flex">
            <Col span="21">
                <div class="layout-content">
                    <Button type="primary" @click="addData" ><Icon type="plus-round"></Icon>&nbsp;添加</Button>&nbsp;&nbsp;
                    <Button type="primary" @click="getData"><Icon type="refresh"></Icon>&nbsp;刷新</Button>&nbsp;&nbsp;
                    <Button type="error" @click="deleteData" ><Icon type="android-delete"></Icon>&nbsp;删除</Button>
                    <Input  icon="ios-search" v-model="filter.title" placeholder="请输入..." style="width: 200px" @on-click="searchitem"></Input>
                   
                        <Modal v-model="modal1" title="添加新闻">
                        <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
                            <FormItem label="star" prop="star">
                                <!-- <Input v-model="formValidate.star"></Input> -->
                                <Rate v-model="formValidate.star"></Rate>
                            </FormItem>
                            <FormItem label="评论" prop="title">
                                <quill-editor v-model="formValidate.title"
                                    ref="myQuillEditor">
                                </quill-editor>
                                <!-- <Input v-model="formValidate.title" placeholder="请输入标题"></Input> -->
                            </FormItem>
                            <FormItem label="newsId" prop="newsId">
                                <Input v-model="formValidate.newsId"></Input>
                            </FormItem>
                            <FormItem>
                                <Button type="primary" @click="handleSubmit('formValidate')" >提交</Button>
                         ``       <Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button>
                            </FormItem>
                            
                        </Form>

                        </Modal>
                    <Table :columns="columns1" border   :data="list" @on-selection-change="chose"></Table><br/>
                    <!-- <Button @click="handleSelectAll(true)">设置全选</Button>
                        <Button @click="handleSelectAll(false)">取消全选</Button><br/><br/> -->
                    <Page :total="filter.total" :current="filter.page" show-elevator :page-size="filter.limit" @on-change="changepage" placement="top" show-sizer @on-page-size-change="onPageSizeChange"></Page><br/><br/>
                </div>
            </Col>
        </Row>
    </div>
</template>

<script>
import { quillEditor } from 'vue-quill-editor'
import Base from '../common/Base.js';
export default {
    mixins:[Base],
    data(){
        return {
            module:'comment',
            baseData: [],
            formValidate: {
                    title: '',
                    newsId:'',
                    star:0
            },
             ruleValidate: {
                    title: [
                        { required: true, message: '标题不能为空', trigger: 'blur' }
                    ]
                },
            columns1: [
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '评论',
                        //key: 'title',
                        render: (h, params) => {
                            return h('div', {
                                domProps:{
                                    innerHTML:params.row.title
                                }
                            })
                        }
                    },
                    {
                        title:'评分',
                        key: 'star',
                        render: (h, params) => {   
                            return h('div', [  
                                h('Rate', {   
                                    props: {
                                        type: 'primary',
                                        size: 'small',
                                        value:params.row.star,
                                        disabled:true
                                    },
                                    style: {
                                        marginRight: '5px'
                                    }
                                }, '')
                            ])
                        }

                    },
                    {
                        title: '操作',
                        key: 'action',
                        fixed: 'right',
                        width: 155,
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.editmode=true;
                                            this.editData(params.row._id);
                                        }
                                    }
                                }, '编辑'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.removeData(params.row._id,params.index);
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    }
                ]


        }
    },
    methods:{
        handleSelectAll (status) {
            this.$refs.selection.selectAll(status);
        },
        changeCateId(selcetion){
             if(selcetion.length!==0)
                {
                    this.filter.cateId=selcetion[0]._id;
                
                }else{
                    this.changeCateId(selcetion);
                }
                this.getData();
        }
    },
    created(){
       this.filter.newsId=this.$route.params.id;
    },
    components:{
        quillEditor
    }
}
</script>

<style scoped>